<script setup lang="ts">
import { IMenuItem, type itemIconKey, type itemIconValue, itemType } from '@renderer/types'
import { reactive } from 'vue'
const emit = defineEmits(['item-click'])

const menuList = reactive<IMenuItem>({} as IMenuItem)

for (const key in itemType) {
  menuList[key as itemIconKey] = itemType[key] as itemIconValue
}

const itemClick = (key: itemIconKey, value: itemIconValue) => {
  switch (key) {
    case 'clock':
      emit('item-click', { key, value })
      break
    case 'countdown':
      emit('item-click', { key, value })
      break
    default:
      window.electron.ipcRenderer.send(key)
      break
  }
}
</script>
<template>
  <div
    class="menu w-full bg-sky-400 flex justify-center gap-2 duration-300 rounded-md overflow-hidden"
  >
    <div v-for="(value, key) in menuList" :key="key" :title="value" @click="itemClick(key, value)">
      <svg-icon :name="key" class="svg-icon" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.menu {
  div,
  .svg-icon {
    @apply cursor-pointer h-full aspect-square;
  }
}
</style>
